<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>left model</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

<style type="text/css">
a {
	text-decoration: none;
	color: black;
}
body {
	margin:0;
	/* background-color: #F3F3F3; */
	border: 1px solid #d3d3d3;
	
}
.main {
	/* width: 250px; */
	margin:0px 0px;
	/* border: 1px solid #d3d3d3; */
	padding: 5px 5px;
	/* background-color: #F3F3F3; */
}
.myPanel {
	border-top:1px solid #d3d3d3;
	border-left:1px solid #d3d3d3;
	border-right:1px solid #d3d3d3;
}	
.myPanel .panelHead {
	width: 100%;
	height: 35px;
	line-height: 35px;
	border-bottom: 1px solid #d3d3d3;
	cursor: pointer;
	background-color: #F3F3F3;
}
.myPanel .panelHead .warp{
	margin-left: 10px;
}
.myPanel .panelBody {
	/* border-bottom: 1px solid #d3d3de; */
	display: none;
}
.panelBody .widefull{
	width: 100%;
	height: 30px;
	line-height: 30px;
	border: 0px solid #d3d3d3;
	cursor: pointer;
}
.panelBody .widefull div {
	border: 0px solid #d3d3d3;
	margin-left: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	//warp mousemove and mouseout event
	$(".warp").mouseover(function(){
		$(".warp").css("color","black");
		$(this).css("color","green");
	});
	$(".warp").mouseout(function(){
		$(this).css("color","black");
	});

	//widefull mousemove and mouseout event
	$(".widefull").mouseover(function(){
		$(".widefull").css("background","white");
		$(this).css("background","#EFEFEF");
	});
	$(".widefull").mouseout(function(){
		$(".widefull").css("background","white");
	});
	//widefull click event
	$(".widefull").click(function(){
		$(".widefull").css("color","black").css("font-weight","normal");
		$(this).css("color","green").css("font-weight","bold");
	});
	
	//panelBody toggle
	$(".panelHead").click(function(){
		$(".panelBody").attr("class","panelBody");
		$(this).parent().find(".panelBody").attr("class","panelBody act").toggle(300);
		$("div [class$='panelBody']").slideUp(300);
	});
});
	
</script>
</head>
  
<body>
  <div class="main">
  	<div class="listPanel">
  		<%
  			for(int i=0;i<5;i++){
  			
  		 %>
  		<div class="myPanel">
	  		<div class="panelHead"><div class="warp"><b>takeheading</b></div></div>
	  		<div class="panelBody">
	  			<a href="http://192.168.1.130:8080/BootStrap_1/jsp/book/bookList.jsp" target="rightFrame"><div class="widefull"><div>option1</div></div></a>
	  			<a href="javascript:;"><div class="widefull"><div>option2</div></div></a>
	  			<a href="javascript:;"><div class="widefull"><div>option3</div></div></a>
	  		</div>
  		</div>
  		<%
  			}
  		 %>
  	</div>
  </div>
</body>

</html>
